
Vue.component('task-list',{

    //vue语法需要在一个可识别的root node里面执行,所以需要包一层 div
    template: `
    <div>  
        <task v-for="task in tasks">{{ task.name }}</task>
 
    </div>  

`,

    data () {

        return {

            tasks:[
                {name:'do something 1', completed:true},
                {name:'do something 2', completed:true},
                {name:'do something 3', completed:true},
            ]

        };

    }


});


Vue.component('task',{

    template: "<li><slot></slot></li>"
});

new Vue({

    el:'#root',


});








